<template>
    <view class="content">
        <van-popup  position="bottom" @click-overlay="closePopup" :show="JOpopup" round z-index=104
            custom-style="width: 100%;background:#ffffff;overflow: hidden;" :transition="'van-slide-up'"
            :duration="0.3">
            <view class="popup-content" >
                <!-- <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"> -->
                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <view class="goodsSortTitle"> {{title}}</view>
                        <van-icon name="cross" color="#FFFFFF" size="15" @click="closePopup" />
                    </view>
                    <!-- 综合排序 -->
                    <view class="JOpopup-content sort" v-if="popupBiaoshi===0">
                        <view class="popup_item" v-for="(item,index) in popupData" :key="index"
                            :class="{active:curS===index}" @click="onClickSort(index,$event,item)">{{item.text}}</view>
                    </view>
                    <!-- 价格区间 -->
                    <view class="JOpopup-content price_range" v-if="popupBiaoshi===2">
                        <view  class="range_popup_item" :class="{active:curMin===0}" @click="clickBox(0)">
                            <input type="number" placeholder="￥自定义最低价" cursor-spacing="100"  placeholder-style="text-align:center;" :value="minValue" @keyboardheightchange="handleKeyboardChange" @focus="inputFocus" @change="clickMinVal" @input="clickMinVal" 	adjust-position />
                            <!-- <van-field  class="uni-input" placeholder-style="color:#888888; font-size:12px; line-height:33px;" @change="clickMinVal" placeholder="￥自定义最低价"  :value="minValue" :border="noBorder" hold-keyboard="true" custom-style="color:#111111; font-size:12px; height:33px;line-height:33px; padding:0px;" /> -->
                        </view>
                        <view class="" style="margin: 0 8px ;">-</view>
                        <view  class="range_popup_item" :class="{active:curMax===0}"  @click="clickBox(1)">
                            <input type="number" placeholder="￥自定义最高价" cursor-spacing="100"  placeholder-style="text-align:center;" :value="maxValue" @keyboardheightchange="handleKeyboardChange" @focus="inputFocus"  @change="clickMaxVal" @input="clickMaxVal" adjust-position />
                        </view>
                    </view>
                </view>
                <!-- </scroll-view> -->
                <!-- <van-goods-action v-if="popupBiaoshi === 0">
                    <van-goods-action-button color="#FF6203" text="确定" @click="paixuClick" />
                </van-goods-action> -->
                <view class="btn-area" v-if="popupBiaoshi === 0">
                    <van-button type="primary" class="" @click="paixuClick">确定</van-button>
                </view>
                <van-goods-action v-if="popupBiaoshi !== 0" :style="{ bottom: KeyBoardHeight + 'px' }">
                    <van-goods-action-icon class="custom-icon" icon="replay" text="重置" @click="onClickReplay"> </van-goods-action-icon>
                    <van-goods-action-button color="#FF6203" text="确定" @click="onClickPrice" />
                </van-goods-action>
            </view>
        </van-popup>
    </view>
</template>

<script>
export default {
    props: {
        JOpopup: {
            type: Boolean,
            default: () => false
        },
        roleName: {
            type: String,
            default: () => ''
        },
        popupBiaoshi:{
            type: Number,
            default: () => 0
        }
    },
    data () {
        return {
            curS:0,
            curSName:'',
            curR:0,  //价格区间·
            date: '',
            show: true,
            title: '商品排序',
            option: {},
            url: '',
            stepperValue:1,
            popupData:[
                {
                    text:'综合排序'
                },
                {
                    text:'销量 高→低'
                },
                {
                    text:'价格 高→低'
                },
                {
                    text:'价格 低→高'
                },
                {
                    text:'新品优先'
                },
            ],
            rangeData:[
                {
                    key:1,
                    text:"minPrice"
                },
                {
                    key:2,
                    text:"maxPrice"
                },
            ],
            popupHeight:'300',

            minValue:'',
            maxValue:'',
            curMin:1,
            curMax:1,
            KeyBoardHeight:''
        }
    },

    computed: {
    },


  watch:{
      popupBiaoshi: {
          handler(v) {
              console.log(v, 'v')
              if (v === 0) {
                  this.title = '商品排序'
                  this.popupHeight='300'
              } else if (v === 1) {
                  this.title = '全部分类'
                  this.popupHeight='350'
              } else {
                  this.title = '价格区间'
                  this.popupHeight='200'
              }
          },
          deep: true
      }
    },
    onLoad () {
        if (this.popupBiaoshi===0) {
            this.title = '商品排序'
        } else if (this.popupBiaoshi===2) {
            this.title = '价格区间'
        }
    },
    onReady () {
    },

    methods: {
        // 排序
        onClickSort(val,e,item){
            console.log(val,e,item,'商品排序')
            this.curS=val
            this.curSName=item.text
            if(val===0){

            }
        },
        //    价格区间
        onClickRange(val,e,item){
            this.curR=val
        },
        // 关闭弹窗
        closePopup () {
            if(this.popupBiaoshi===0){
                this.$emit('closeJOPopup')
            }else{
                this.$emit('closeJOPricePopup')
            }
        
        },

        // 确定排序
        paixuClick(){
            this.$emit('closeJOPopup',this.curS,this.curSName,this.popupBiaoshi)
        },

        // 确定
        onClickPrice(){
            if (!this.validateBeforeSubmit()) {
                return;
            }
            this.$emit('closeJOPricePopup',this.minValue,this.maxValue,this.popupBiaoshi)

        },

        // 重置
        onClickReplay(){
            if(this.popupBiaoshi===2){
                this.minValue=''
                this.maxValue=''
            }else{
                this.curS=0
            }
        },

        // 确定    分类+价格区间
        onClickCart(){
            this.$emit('closeJOPopup')
        },

        // 
        clickBox(val){
            console.log(val)
            if(val===0){
                this.curMin=0
                this.curMax=1
            }else{
                this.curMin=1
                this.curMax=0
            }
        },
        // 最小价格
        clickMinVal(e){
            const value = e.detail.value
            // 过滤非数字字符
            this.minValue = value.replace(/[^\d]/g, '');
            this.curMin=0
            this.curMax=1
            this.validatePriceRange()
        },
        // 最大值
        clickMaxVal(e){
            const value = e.detail.value
            this.maxValue = value.replace(/[^\d]/g, '');

            this.curMin=1
            this.curMax=0
            this.validatePriceRange()
        },
        compareContents() {
            const left =  this.minValue
            const right = this.maxValue
            if (left === '' && right === '') {
                return;
            } else if (left === '') {
                wx.showToast({
                    title: '请输入左边内容',
                    icon: 'none'
                });
                return;
            } else if (right === '') {
                wx.showToast({
                    title: '请输入右边内容',
                    icon: 'none'
                });
                return;
            }
            if (left < right) {
                wx.showToast({
                    title: '左边内容小于右边内容',
                    icon: 'success'
                });
            } else if (left === right) {
                wx.showToast({
                    title: '两边内容相等',
                    icon: 'info'
                });
            } else {
                wx.showToast({
                    title: '左边内容大于右边内容',
                    icon: 'error'
                });
            }
        },

        // 校验价格区间
        validatePriceRange() {
            const min = Number(this.minValue)
            const max = Number(this.maxValue)

            // 当两个值都有效时进行校验
            if (this.minValue && this.maxValue) {
                if (min >= max) {
                    wx.showToast({
                        title: '最高价需大于最低价',
                        icon: 'none',
                        duration: 2000
                    });
                    // 自动清空错误值
                    this.maxValue = ''
                }
            }
        },
        // 提交前校验
        validateBeforeSubmit() {
            if (!this.minValue || !this.maxValue) {
                wx.showToast({
                    title: '请完整输入价格区间',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }

            const min = Number(this.minValue)
            const max = Number(this.maxValue)

            if (min >= max) {
                wx.showToast({
                    title: '最高价必须大于最低价',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }

            if (min <= 0 || max <= 0) {
                wx.showToast({
                    title: '价格必须大于0',
                    icon: 'none',
                    duration: 2000
                });
                return false;
            }

            return true;
        },
        inputFocus(e) {
            console.log('键盘弹出，焦点获取事件触发', e,e.detail.height);
            // e.detail.height可能包含键盘高度信息，不过具体是否有这个属性要看情况
            let height = e.detail.height || 0;
            this.KeyBoardHeight= height
        },
        // keyboardheightchangeMin(e){
        //     console.log('键盘弹出', e);
        //     let height = e.detail.height || 0;
        //     this.KeyBoardHeight= height
        // },
        // keyboardheightchangeMax(e){
        //     console.log('键盘弹出', e);
        //     let height = e.detail.height || 0;
        //     this.KeyBoardHeight= height
        // }
        // 合并键盘高度处理
        handleKeyboardChange(e, type) {
            const height = e.detail.height || 0;
            this.KeyBoardHeight = height;
            if (height > 0) {
                this.popupHeight = Math.min(window.innerHeight * 0.8, 400);
            }
        }
  },

}
</script>
<style lang="scss" scoped>

.content{
    // padding-bottom: 500px;
    // padding-bottom: env(safe-area-inset-bottom);
}

::v-deep .van-button__text {
    // display: inline-block;
    display: flex !important;
    flex-direction: column !important;
}
// 提示框
.popup-content {
    padding: 24px 24px 0rpx 24px;
    font-size: 12px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    height:100%;
    padding-bottom: calc(0rpx + env(safe-area-inset-bottom));


    .popup-main {
        height: 100%;
        // padding-bottom: env(safe-area-inset-bottom);
        padding-bottom:144rpx;
    }


    .goodsSortTitle {
        font-size: 20px;
        text-align: left;
        color: #111111;
        line-height: 20px;
    }


    .JOpopup-content {
        // padding-top: 23px;

    }

    // 商品排序
    .sort {
        padding-top: 23px;
        .popup_item {
            // font-weight: bold;
            font-size: 14px;
            text-align: left;
            color: #111111;
            line-height: 14px;
            margin-bottom: 29px;

            &.active {
                font-weight: bolder;
                color: #FF6203;
            }
        }

        .popup_item:last-child {
            margin-bottom: 0px;
        }
    }

    // 价格区间
    .price_range {
        padding-top: 30px;
        padding-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .range_popup_item {
        border: 1px solid #888888;
        width: 45%;
        display: flex;
        justify-content: center;
            &.active {
                border: 1px solid #333333;
                
            }
        }


    // 加入购物车按钮
    .goodsAction {
        margin-top: 22px;
        width: calc(100% - 48px);
        text-align: center;
        // background-color: aquamarine;
        height: 70px;
    }

    .button {
        width: 100%;
        font-size: 28rpx;
        color: #ffffff;
        height: 86rpx;
        line-height: 86rpx;
        border-radius: 25px;
        border-style: initial !important;
        padding: 0 !important;
        background: #FF6203 !important;
    }
}

::v-deep .van-cell {
    border: 1px solid #888888 !important;
}

::v-deep .van-cell--hover .hover-class{
    border: 1px solid #888888;
}
input{
    height: 33px;
    line-height: 33px;
}
.range_popup_item input::-webkit-input-placeholder {
  text-align: center;
}
 
.range_popup_item input::-moz-placeholder {
  text-align: center;
}
 
.range_popup_item input:-ms-input-placeholder {
  text-align: center;
}
 
.range_popup_item input::-ms-input-placeholder {
  text-align: center;
}
 
.range_popup_item input::placeholder {
  text-align: center;
}

::v-deep .van-goods-action, .van-goods-action--safe{
    border: none !important;
}
::v-deep .van-button--primary {
  width: 100%;
  height: 86rpx;
  border-radius: 50rpx;
  background: #ff6203;
  margin-top: 32rpx;
  font-size: 28rpx;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}
</style>

